<!DOCTYPE html PUBLIC>
<html>
<meta charset="utf-8" />
<title>跟随鼠标移动（大图展示）</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
#box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;}
#box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}
#box li.active{border:1px solid #a10000;}
#box li img{width:170px;height:170px;vertical-align:top;}
#big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;}
#big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(img/loading.gif) 50% 50% no-repeat;}
</style>
<script type="text/javascript">
window.onload = function(){
	var box = document.getElementById("box");
	var arrLI = box.children[0].children;
	var bigbox = document.getElementById("big");
	/*
	for(var i=0; i<arrLI.length; i++) {
		arrLI[i].addEventListener("mouseover", function(){
			var oImg = document.createElement("img");
			var str = this.children[0].src;
			str = str.substring( str.length - 11, str.length-4 );
			oImg.src = str+"_big.jpg";
			
			bigbox.replaceChild( oImg, bigbox.children[0] );
			bigbox.style.display = "block";
		})
		arrLI[i].addEventListener("mousemove", function(e){
			var e = e || event;
			
			if( e.clientX > ( window.innerWidth - bigbox.offsetWidth - 10) ) {
				bigbox.style.left = e.clientX - bigbox.offsetWidth +"px";
			} else {
				bigbox.style.left = e.clientX + 10 +"px";
			}
			bigbox.style.top = e.clientY + 10 +"px";
		})
		
		arrLI[i].addEventListener("mouseout", function(){
			bigbox.style.display = "none";
		})
	}
	*/
	box.addEventListener("mouseover", function(e){
		var e = e || event;
		if(e.target.nodeName == "IMG") {
			var oImg = document.createElement("img");
			var str = e.target.src;
			str = str.substring( str.length - 11, str.length-4 );
			oImg.src = str+"_big.jpg";
			bigbox.replaceChild( oImg, bigbox.children[0] );
			bigbox.style.display = "block";
		}
	})
	
	box.addEventListener("mousemove", function(e){
		var e = e || event;
		if( e.clientX > ( window.innerWidth - bigbox.offsetWidth - 10) ) {
			bigbox.style.left = e.clientX - bigbox.offsetWidth +"px";
		} else {
			bigbox.style.left = e.clientX + 10 +"px";
		}
		bigbox.style.top = e.clientY + 10 +"px";
	})
	
	box.addEventListener("mouseout", function(){
		bigbox.style.display = "none";
	})
	
};
</script>
</head>
	<body>
		<div id="box">
		    <ul>
		    	<li class=""><img src="shirt_1.jpg"></li>
		        <li class=""><img src="shirt_2.jpg"></li>
		        <li class=""><img src="shirt_3.jpg"></li>
		        <li class=""><img src="shirt_4.jpg"></li>
		    </ul>
		</div>
		<div id="big" style="display: none; top: 190px; left: 812px;">
			<div></div>
		</div>
	
	</body>
</html>